<template>
	<view class="container">
		<view class="login-box">
			<view class="logo-section">
				<image src="/static/tiwen.gif" class="logo" mode="aspectFit" />
				<text class="app-name">游戏社区</text>
			</view>
			
			<view class="form-section">
				<view class="input-item">
					<text class="iconfont icon-user"></text>
					<input type="text" 
						v-model="username" 
						placeholder="请输入账号" 
						placeholder-class="placeholder" />
				</view>
				
				<view class="input-item">
					<text class="iconfont icon-password"></text>
					<input type="password" 
						v-model="password" 
						placeholder="请输入密码" 
						placeholder-class="placeholder" />
				</view>
				
				<view class="login-btn" @click="handleLogin">登 录</view>
				
				<view class="other-options">
					<text class="register-link" @click="goToRegister">注册账号</text>
					<text class="forgot-link">忘记密码？</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			password: ''
		}
	},
	methods: {
		handleLogin() {
			if (!this.username || !this.password) {
				uni.showToast({
					title: '请输入账号和密码',
					icon: 'none'
				});
				return;
			}
			
			if (this.username === 'huaaotian' && this.password === '10086') {
				// 存储登录状态
				uni.setStorageSync('isLoggedIn', true);
				uni.setStorageSync('userInfo', {
					username: this.username,
					avatar: '/static/tiwen.gif',
					userId: '10086'
				});
				
				uni.showToast({
					title: '登录成功',
					icon: 'success',
					duration: 1500,
					success: () => {
						setTimeout(() => {
							// 返回上一页
							uni.navigateBack();
						}, 1500);
					}
				});
			} else {
				uni.showToast({
					title: '账号或密码错误',
					icon: 'none'
				});
			}
		},
		goToRegister() {
			uni.navigateTo({
				url: '/pages/login/register'
			});
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.login-box {
	width: 100%;
	max-width: 400px;
}

.logo-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 40px;
}

.logo {
	width: 80px;
	height: 80px;
	border-radius: 40px;
	margin-bottom: 15px;
}

.app-name {
	font-size: 24px;
	color: #9796B8;
	font-weight: bold;
}

.form-section {
	background: #2D2D44;
	border-radius: 12px;
	padding: 20px;
}

.input-item {
	display: flex;
	align-items: center;
	background: #1E1E2E;
	border-radius: 8px;
	padding: 12px 15px;
	margin-bottom: 15px;
}

.input-item .iconfont {
	font-size: 20px;
	color: #6E6C89;
	margin-right: 10px;
}

.input-item input {
	flex: 1;
	color: #9796B8;
	font-size: 16px;
}

.placeholder {
	color: #6E6C89;
}

.login-btn {
	background: #9796B8;
	color: #1E1E2E;
	text-align: center;
	padding: 12px;
	border-radius: 8px;
	font-size: 16px;
	margin: 20px 0;
}

.other-options {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
}

.register-link, .forgot-link {
	color: #6E6C89;
}
</style> 